<template>
  <!-- 表单 -->
  <el-table
    ref="singleTable"
    border
    :cell-style="{ textAlign: 'center' }"
    :data="DataForm"
    :header-cell-style="{ textAlign: 'center' }"
    highlight-current-row
    max-height="480"
    style="width: 100%; margin-top: 60px"
    tooltip-effect="dark"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-for="(v, i) of formTH"
      :key="i"
      :fixed="v.fixed"
      :label="v.label"
      label-class-name="DisabledSelection"
      :prop="v.prop"
      :type="v.type"
      :width="v.width"
    >
      <template #header v-if="v.label == '长度参与计算'">
        <el-switch v-model="allSwitch" />
        <span>{{ v.label }}</span>
      </template>
      <!-- :prop="v.prop" :type="v.type"  -->
      <template v-if="v.type == 'input' || v.type == 'switch' || v.type == 'button' || v.type == 'select'" #default="scope">
        <!-- 这里写if了 -->
        <el-input
          v-if="v.type == 'input'"
          v-model="scope.row[v.prop]"
          clearable
          :disabled="v.isDisable"
          min="0"
          onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"
          onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
          placeholder=""
        />
        <el-switch v-else-if="v.type == 'switch'" v-model="scope.row[v.prop]" :disabled="v.isDisable" />

        <el-button v-else-if="v.type == 'button'" :disabled="v.isDisable" size="mini" type="primary" @click="handleSave(scope.row)">
          <vui-icon icon="save-line" />
          {{ v.value }}
        </el-button>
        <el-select
          v-else-if="v.type == 'select'"
          v-model="scope.row[v.prop]"
          clearable
          :disabled="v.isDisable"
          placeholder="请选择"
          @change="changeSelect(v.prop, $event, v.options, scope.$index)"
          @click="clickSelect(scope.row, scope.$index)"
        >
          <el-option v-for="(vv, ii) in v.options" :key="ii" :label="vv.label" :value="vv.value" />
        </el-select>
        <div v-else>{{ scope.row[v.prop] }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import settingJson from '@bqms/common/index'
  // import debounce from '@bqms/common/fun'
  // import mixin from '@bqms/common/mixin'

  export default {
    name: 'Table',
    // mixins: [mixin],
    props: {
      formData: {
        type: Array,
        default: function () {
          return []
        },
      },
      formString: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        settingJson: settingJson,
        formTH: [], //表头值
        DataForm: [], //表格值
        multipleSelection: [],
        allSwitch: false,
      }
    },
    watch: {
      allSwitch: {
        deep: true,
        handler(newval) {
          this.DataForm.map((item) => {
            item.INSTALL_CALCULATELEN = newval
          })
        },
      },
      formData: {
        deep: true,
        handler(newval) {
          newval.map((item) => {
            if (item.INSTALL_CALCULATELEN == 'Y' || item.INSTALL_CALCULATELEN == true) {
              item.INSTALL_CALCULATELEN = true
            } else {
              item.INSTALL_CALCULATELEN = false
            }
          })

          this.DataForm = newval
        },
      },
      DataForm: {
        deep: true,
        handler(newval) {
          this.$pub(`TableData${this.formString}`, newval)
        },
      },
    },
    created() {
      this.formTH = this.settingJson[this.formString].formData
    },
    methods: {
      inputBox(index, name, value) {
        if (Number(value) < 0 && name == 'INSTALL_PRICE') {
          this.$message({
            message: '请输入正确的单价！',
            type: 'warning',
          })
          this.DataForm[index][name] = 0
        }
      },
      clickSelect(row, index) {
        this.$pub(`loadSelect${this.formString}`, row, index)
        // this.currentRow = row
        this.$refs.singleTable.setCurrentRow(row)
      },
      changeSelect(name, e, option, index) {
        // 驱动段选择带出加个回显
        if (name == 'DRIVE_MODEL') {
          let price = option.filter((item) => {
            return item.value == e
          })
          let value = option.filter((item) => {
            return item.value == e
          })

          this.DataForm[index].DRIVE_METHOD = value[0].value
          this.DataForm[index].DRIVE_SEGMENT_PRICE = price[0].PRICE_UNTAX
        } else if (name == 'ECU_BRAND') {
          // 单机电控品牌下拉带出价格
          let price = option.filter((item) => {
            return item.value == e
          })
          this.DataForm[index].ECU_PRICE = price[0].PRICE_UNTAX
        } else if (name == 'INVERTERB_RAND') {
          // 变频器品牌下拉带出价格
          let price = option.filter((item) => {
            return item.value == e
          })
          this.DataForm[index].INVERTERP_RICE = price[0].PRICE_UNTAX
        }
      },

      // 保存
      handleSave(row) {
        this.$pub(`TableSaveOne${this.formString}`, row)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
    },
  }
</script>

<style lang="scss"></style>
